<template>
  <div id="header">
    <div class="header_top container clearflx">
      <div class="logo">
        <img src="../../assets/logo_03.gif" alt />
      </div>
      <div class="search">
        <div class="search_top">
          <span class="search_toptxt" v-if="souNames==0">搜展会</span>
          <span class="search_toptxt" v-else>搜服务</span>
        </div>
        <form action method class="search_bottom clearflx">
          <input type="text" class="search_text" />
          <input type="submit" value="搜索" class="search_btn" />
        </form>
      </div>
    </div>
    <div class="container">
      <div class="navtab clearflx">
        <div class="navtab_left clearflx">
          <div class="clearflx" style="float:left;">
            <router-link
              class="navtab_list"
              :class="{navtab_active:navTab_btn==0}"
              @click="navTab_btn=0"
              to="/"
            >首页</router-link>
            <router-link
              class="navtab_list"
              :class="{navtab_active:navTab_btn==1}"
              @click="navTab_btn=1"
              to="/info"
            >展会信息</router-link>
            <router-link
              class="navtab_list"
              :class="{navtab_active:navTab_btn==2}"
              @click="navTab_btn=2"
              to="/consult"
            >展会资讯</router-link>
            <router-link
              class="navtab_list"
              :class="{navtab_active:navTab_btn==3}"
              @click="navTab_btn=3"
              to="/server"
            >展会服务</router-link>
            <router-link
              class="navtab_list"
              :class="{navtab_active:navTab_btn==4}"
              @click="navTab_btn=4"
              to="/exhibitionCenter"
            >展会中心</router-link>
          </div>
          <i></i>
        </div>
        <div class="navtab_right">
          <div class="clearflx">
            <router-link to="/login" class="logobtn">登录</router-link>
            <router-link to="/register" class="logobtn register">注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    navType: String,
    souName: String
  },
  data() {
    return {
      // 搜索栏上面的tab切换
      search_topBtn: 0,
      // 导航栏tab切换
      navTab_btn: 0,
      souNames:0
    };
  },
  created() {
    this.navTab_btn = this.navType;
    this.souNames = this.souName;
  }
};
</script>
<style lang="scss" scoped>
.header_top {
  .logo {
    width: 526px;
    float: left;
    > img {
      width: 100%;
    }
  }
  .search {
    width: 400px;
    float: right;
    margin-top: 10px;
    .search_top {
      text-align: left;
      .search_toptxt {
        line-height: 35px;
        padding: 10px;
        background-color: #c81622;
        font-size: 14px;
        color: #fff;
      }
    }
    .search_bottom {
      display: block;
      .search_text {
        width: 318px;
        height: 10px;
        line-height: 10px;
        font-size: 12px;
        padding: 10px;
        border: 1px solid #c81622;
        float: left;
        background-image: url(../../assets/info/search_top.jpg);
        background-repeat: no-repeat;
        background-size: 130%;
        background-position: right;
      }
      .search_btn {
        float: left;
        width: 60px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: #fff;
        background-color: #c81622;
        border: none;
      }
    }
  }
}
.navtab {
  margin: 10px 0;
  .navtab_left {
    // width: 700px;
    float: left;
    > .clearflx {
      .navtab_list {
        display: block;
        padding: 0 4px;
        margin: 0 20px;
        font-size: 20px;
        color: #848484;
        float: left;
      }
      .navtab_list:hover {
        cursor: pointer;
        color: #c81622;
      }
      .navtab_active {
        color: #c81622;
      }
    }
    > i {
      width: 20px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
      background-image: url(../../assets/info/search_tab.png);
      background-repeat: no-repeat;
      background-size: 170%;
      background-position: center;
      margin-top: 4px;
    }
  }
  .navtab_right {
    // width: 100px;
    float: right;
    .clearflx {
      .logobtn {
        padding: 0 4px;
        margin: 0 10px;
        font-size: 20px;
        color: #848484;
        float: left;
      }
      .logobtn:hover {
        cursor: pointer;
        color: #c81622;
      }
    }
  }
}
</style>